<!DOCTYPE html>
<html>
<head>
<meta name="shengchong" charset="utf-8" />
<title>学习html</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"></link>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" />
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<!-- <script src="/js/sc.js"></script> -->
<style type="text/css">
.tabtop13 {
	margin-left: 20px;
}

.tabtop13 td {
	background-color: #ffffff;
	height: 25px;
	line-height: 150%;
	font-family: 宋体;
	text-align: center;
	border: 1px solid green;
}

.tabtop13 th {
	background-color: #ffffff;
	height: 25px;
	line-height: 150%;
	font-family: 宋体;
	text-align: center;
	border: 1px solid green;
}

.biaoti {
	font-family: 微软雅黑;
	font-size: 16px;
	font-weight: bold;
	color: #255e95;
}

.listyle {
	font-size: 15px;
	margin-right: 20px;
}

.btbg {
	background: #e9faff !important;
}

body {
	background-img: url('/dist/img/photo1.png');
	background-color: #FFACFF;
}

.main {
	text-align: justify;
	/* 	margin-left: 5px; */
	line-height: 200%;
	width: 600px;
	/* 	font-style: italic; */
	/* 	border-style: outset; */
	/* 	border-width: 10px; */
	/* 	border-color: red; */
	/* 	letter-spacing: 2px; */
}

.head {
	/* 	height: 50px; */
	background: #ADD8E6;
	letter-spacing: 5px;
	border: 3px solid green;
	font-size: 20px;
	/* 	padding: 20px,0; */
	text-align: center;
	line-height: 10px;
}
</style>

</head>
<body>
	<div id="stulist">
		<div class="head">
			<h3 id="demo">河北科技大学信息管理网站</h3>
		</div>
		<div id="menu-class"
			style="background:	#B0E0E6;height:500px;width:150px;float:left;margin-top:10px">
			<ul>
				<li v-for="site in classList"  v-on:click='loadStudent(site.classnum)'>{{site.name}}</li>
			</ul>
			<!-- 通过jquery方式获取数据 -->
			<!-- 		<ul> -->
			<!-- 			<li class="listyle" th:each="grade:${list2}"> -->
			<!-- 				<a href="#" th:text="${grade.name}" th:onclick="'load('+${grade.id}+')'" > </a> -->
			<!-- 			</li> -->
			<!-- 		</ul> -->
			<!-- 通过原生的ajax请求数据 -->
			<!-- 		<ul> -->
			<!-- 			<li class="listyle" th:each="grade:${list2}"> -->
			<!-- 				<a href="#" th:text="${grade.name}" th:onclick="'loadByJquery('+${grade.id}+')'" > </a> -->
			<!-- 			</li> -->
			<!-- 		</ul> -->
		</div>
		<div style="height:100px;width:400px;float:left;margin-top:10px">
			<table width="250%" border="0" cellspacing="1" cellpadding="4"
				bgcolor="#cccccc" class="tabtop13" align="center">
				<tr>
					<th class="btbg biaoti">{{titles.stu_name}}</th>
					<th class="btbg biaoti">{{titles.stu_num}}</th>
					<th class="btbg biaoti">{{titles.stu_sex}}</th>
					<th class="btbg biaoti">{{titles.stu_age}}</th>
				</tr>

				<tr v-for="stu in sites">
					<td>{{stu.name}}</td>
					<td>{{stu.stu_num}}</td>
					<td>{{stu.sex}}</td>
					<td>{{stu.age}}</td>
				</tr>
			</table>
			<!-- 		<p class="main" id="content" ></p>		 -->
			<!-- 		<p class="main" id="content2" ></p>		 -->
		</div>
	</div>
	<script src="/js/sc.js"></script>
</body>
</html>